<template>
  <div class="footer">
    <ul class="foot-left">
      <li>
        <img src="@/assets/images/detail/kf.png" alt="" /><span>客服</span>
      </li>
      <li @click="$router.push('/cart')">
      <div cla>
        <img src="@/assets/images/detail/cart.png" alt="" />
        
      </div>
        <span>购物车</span>
      </li>
      <li v-if="isShow" @click="isShow = !isShow">
        <img src="@/assets/images/detail/sc4.png" alt="" />收藏
      </li>
      <li v-if="!isShow" @click="isShow = !isShow">
        <img src="@/assets/images/detail/sc5.png" alt="" /><span>已收藏</span>
      </li>
    </ul>
    <div class="foot-right">
      <div class="cart" @click="addToCartFn">加入购物车</div>
      <div class="mai" @click="buyGoods">购买</div>
    </div>
    <div class="tan" v-show="isTan">已添加购物车</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      name: null,
      imag: null,
      count: null,
      price: null,
      isTan: false,
      num: 0,
    };
  },
  props: ["detailData"],
  created() {},
  methods: {
    buyGoods() {
      this.$store.commit("changeBuyShow", true);
    },
    addToCartFn() {
      console.log(this.detailData);
      this.name = this.detailData.goodsName;
      this.imag = this.detailData.goodsLogo;
      this.count = 1;
      this.price = this.detailData.goodsPrice;
      var goods = {
        name: this.name,
        imag: this.imag,
        count: this.count,
        price: this.price,
        flag: false,
      };
      this.$store.commit("addToCart", goods);
      console.log(this.$store.state.cartList);
      //  购物车数量
      this.num = this.$store.state.cartList.length;
      console.log(goods);
      this.save();
      setTimeout(() => {
        this.isTan = !this.isTan;
      }, 2000);
      this.isTan = !this.isTan;
    },
    save() {
      localStorage.liuyan = JSON.stringify(this.$store.state.cartList);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.footer {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  font-size: 16px;
  .foot-left {
    width: 45%;
    display: flex;
    justify-content: start;
    background: #fff;
    li {
      height: 49px;
      width: 33.3%;
      /* border: 1px solid #000; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: 6vw;
        height: 6vw;
        
      }
      .num {
        display: block;
          position: absolute;
          right: 2vw;
          top: -1vw;
          background: red;
          color: #fff;
          width: 4vw;
          height: 4vw;
         text-align: center;
         line-height: 4vw;
         border-radius: 50%;
        }
    }
  }
  .foot-right {
    width: 55%;
    display: flex;

    .cart {
      width: 50%;
      background: #ffe817;
      height: 49px;
      /* border: 1px solid #000; */
      text-align: center;
      line-height: 49px;
    }
    .mai {
      height: 49px;
      width: 50%;
      background: #eb4868;
      color: #fff;
      /* border: 1px solid #000; */
      text-align: center;
      line-height: 49px;
    }
  }
  .tan {
    position: absolute;
    /* border: 1px solid #000; */
    box-shadow: 0px 0px 2px 3px rgba(117, 117, 116, 0.5);
    background: rgba(245, 247, 248, 0.5);
    top: -800%;
    left: 40%;
    width: 25%;
    height: 30px;
    text-align: center;
    line-height: 26px;
    border-radius: 5px;
  }
}
</style>